<template>
    <div class="video-wrap">
        <video-cover v-bind="$attrs" :play="view">
            <div class="count">
                <span class="duration">{{formatTime(duration)}}</span>
                <span>{{formatNumber(view)}}观看</span>
                <span>{{formatNumber(danmaku)}}弹幕</span>
            </div>
        </video-cover>
    </div>
</template>

<script>
import VideoCover from '@/components/VideoCover'
import { formatTime, formatNumber } from '@/utils'
export default {
    name: 'PostVideo',
    inheritAttrs: false,
    components: {
        VideoCover
    },
    setup(props, { attrs }) {
        const view = attrs.view
        return {
            view,
            formatTime,
            formatNumber
        }
    }
}
</script>

<style lang="scss" scoped>
    .video-wrap {
        padding: {
            left: 10px;
            right: 10px;
        }
        margin-bottom: 10px;
    }
    .count {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: 56px;
        padding: {
            left: 10px;
            bottom: 10px;
        }
        box-sizing: border-box;
        font-size: 12px;
        color: $color-white;
        background-image: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 100%);
        span {
            margin-right: 10px;
        }
        .duration {
            border-radius: 2px;
            padding: 0 2px;
            background: rgba(0,0,0,0.5);
        }
    }
</style>